.yg-community {
    width: 100vw;

    .yg-community-header {
        width           : 100vw;
        height          : 50px;
        background-color: var(--themeColor);
        display         : flex;
        justify-content : space-between;
        align-items     : center;
        padding         : 0 5px;

        i.icon.icon-return {}

        h1 {
            font-size  : 20px;
            color      : white;
            font-weight: normal;
        }

        i.icon.icon-addCommunity {}
    }

    .yg-community-list {

        .community-list-item {
            width: 100vw;
            padding:10px;
            border-top:1px solid #ddd;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
            height:262px;
            .community-header {
                color:#808080;
                img {
                    height:40px;
                    width:40px;
                    vertical-align: middle;
                }

                span {
                  
                    display:inline-block;
                    font-size:15px;
                    height: 40px;
                    line-height: 40px;
                }

                p {
                    margin-top:5px;
                    font-size:15px;
                }
            }

            .community-content {
                margin:5px 0;
                display: flex;
                .community-content-item {
                    margin-right:4px;
                    img {
                        height:114px;
                        width:114px;
                    }
                }
            }

            .community-footer {
                display:flex;
                justify-content: space-between;
                align-items: center;
                height:30px;
                em {
                    font-size:15px;
                    color:#999999;
                }

                i.icon.icon-share {}
            }
        }
    }
}